<!--
* description: 整车销售---订单管理
* author:xlc
* createdDate: 2020-11-17
-->
<template>
  <div class="app-container app-container-table">
    <el-dialog
      v-dialogDrag
      style="margin:15px"
      :visible="popupsVisible"
      :title="titleName"
      center
      width="50%"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="closeEdit"
    >
      <dialogHeader slot="title" :title="titleName" :style-type="$store.state.app.dialogType" />
      <div>
        <!-- 表单组件 -->
        <el-button type="primary" style="float:right;margin-right:1rem" @click="printTest()">打印</el-button>
        <div id="print-table" class="print-table">
          <h2>交车确认单</h2>
          <table border="1px" width="100%" style="padding:1rem">
            <tr>
              <td colspan="6" style="text-align:left;height;height:140px">
                尊敬的客户:
                <p style="text-indent:2em">为了确保您的新车在交车时处于完好的状态，我们对您的新车已经进行了全面的PDI检查。此外，交付代表已向您介绍了新车的操作方法及车辆的保修政策和服务的范围等。以下是我们的交车确认表，请您与交付代表共同完成。我们衷心的希望您对我们的产品及服务满意,并祝您一切收利。</p>
              </td>
            </tr>
            <tr>
              <td>车主姓名</td>
              <td>{{ dataForForm.signatoryName }}</td>
              <td>车主电话</td>
              <td>{{ dataForForm.signatoryPhone }}</td>
              <td>联系人</td>
              <td>{{ dataForForm.custLxName }}</td>
            </tr>
            <tr>
              <td>交车日期</td>
              <td>{{ dataForForm.nowTime }}</td>
              <td>购买方式</td>
              <td>{{ dataForForm.buyTypeName }}</td>
              <td>联系电话</td>
              <td>{{ dataForForm.custTel }}</td>
            </tr>
            <tr>
              <td>车系</td>
              <td>{{ dataForForm.carSeriesCn }}</td>
              <td>基础车型</td>
              <td>{{ dataForForm.carConfigCn }}</td>
              <td>选装包</td>
              <td>{{ dataForForm.optionalPagName }}</td>
            </tr>
            <tr>
              <td>车身颜色</td>
              <td>{{ dataForForm.carColorName }}</td>
              <td>内饰颜色</td>
              <td>{{ dataForForm.carIncolorName }}</td>
              <td>VIN码</td>
              <td>{{ dataForForm.vin }}</td>
            </tr>
            <tr>
              <td colspan="6" style="text-align:left;text-indent:2em;height:80px">下表是与车辆相关的随车文件、备件和工具，请认真查看，如无问题请您在相应的方枢内打“√”，并请确认签收，这些文件、备件及工具均为原件，请认真保管，遗失不补。</td>
            </tr>
            <tr>
              <td>(<span style="color:rgba(255,255,255,0)">空白</span>)</td>
              <td colspan="5">合格证，一致性证书，环保清单</td>
            </tr>
            <tr>
              <td>(<span style="color:rgba(255,255,255,0)">空白</span>)</td>
              <td colspan="5">用户手册</td>
            </tr>
            <tr>
              <td>(<span style="color:rgba(255,255,255,0)">空白</span>)</td>
              <td colspan="5">保养及三包凭证</td>
            </tr>
            <tr>
              <td>(<span style="color:rgba(255,255,255,0)">空白</span>)</td>
              <td colspan="5">购车发票</td>
            </tr>
            <tr>
              <td>(<span style="color:rgba(255,255,255,0)">空白</span>)</td>
              <td colspan="5">新车PDI检查表</td>
            </tr>
            <tr>
              <td>(<span style="color:rgba(255,255,255,0)">空白</span>)</td>
              <td colspan="5">钥匙(<span style="color:rgba(255,255,255,0)">空白</span>)把</td>
            </tr>
            <tr>
              <td>(<span style="color:rgba(255,255,255,0)">空白</span>)</td>
              <td colspan="5">工具包</td>
            </tr>
            <tr>
              <td>(<span style="color:rgba(255,255,255,0)">空白</span>)</td>
              <td colspan="5">精品</td>
            </tr>
            <tr>
              <td>(<span style="color:rgba(255,255,255,0)">空白</span>)</td>
              <td colspan="5">其他</td>
            </tr>
            <tr>
              <td colspan="6" style="text-align:left;height:80px">
                <p style="text-indent:2em">经现场检查、调试，本人所购车辆外观、内饰完好，随车文件及工具齐全，车辆各项功能正常，车况良好，办理上牌手续需交付方保管文件包括:合格证。一致性证书、购车发票</p>
                <div style="text-align:right">是 ▢   否 ▢</div>
              </td>
            </tr>
            <tr style="text-align:left">
              <td colspan="3">
                <p>顾客签字确认：</p>
                <p>日期：</p>
              </td>
              <td colspan="3">
                <p>交付代表签字确认：</p>
                <p>日期：</p>
              </td>
            </tr>
            <tr>
              <td colspan="6" style="text-align:left">注意事项：
                <div style="text-align:left;height:50px">1、随车文件、备件及工具因车辆类型不同而存在一定差异，交车时如果存在上表中来列明的文件、备件或工具，请在“其他”栏中注明;</div>
                <div style="text-align:left;height:50px">2、委托交车时，委托人应填具委托书，代理人于交车时所行使之任何权利及签收，视同委托人行为;</div>
                <div style="text-align:left;height:50px">3、本表一式二份，第一联销售部审核后归入用户档案存档，第二联客户留存;</div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import dialogHeader from '@/components/dialogHeader'
import printJS from 'print-js'
import Vue from 'vue'
export default {
  components: {
    dialogHeader
  },
  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData([to.path, 'supplierMessage-edit'], () => {
      next()
    })
  },
  props: {
    popupsVisible: {
      type: Boolean,
      default: false
    },
    dataForForm: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      titleName: '交车确认单',
      // 动态生成网格列
      formField: { peopleId: '', storeId: '' }
    }
  },
  mounted() {
  },
  methods: {
    // 打印
    printTest() {
      printJS({ printable: 'print-table', type: 'html', targetStyles: ['*'] })
    },
    // 关闭弹窗
    closeEdit() {
      this.$emit('closePrint')
    },
    // 保存
    save(res) {
    }
  }
}
</script>
<style lang="scss" scoped>
    .print-table{
        text-align: center;
        font-size:12px;
        width: 90%;
        margin:auto;
        padding-bottom: 5rem;
        td{
          padding-left:1rem;
          padding-right:1rem
        }
    }
</style>
